<template>
  <div id="header">
    <div class="slider-bar-button" @click="checkSlider">
      <i class="iconfont icon-people_list_light"></i>
    </div>
    <div class="name">{{siteName}}</div>
    <div class="msg-post" @click.stop="myMessage"><i class="iconfont icon-notice"></i><em
      v-if="msgCount">{{msgCount}}</em></div>
    <div class="create-topic" @click.stop="createTopic"><i class="iconfont icon-write"></i></div>
  </div>
</template>

<script type="text/ecmascript-6">
  import {siteName} from 'common/js/config'
  import {checkLogin, isLogin} from 'common/js/mixin'
  import {mapGetters} from 'vuex'
  import {getMsgCount} from 'api/message'

  export default {
    mixins: [checkLogin, isLogin],
    data() {
      return {
        siteName: siteName,
        msgCount: 0
      }
    },
    computed: {
      ...mapGetters([
        'userInfo'
      ])
    },
    created() {
      setTimeout(() => {
        this._getMsgCount()
      }, 20)
    },
    methods: {
      // 查看我的消息
      myMessage() {
        this._checkLogin().then((res) => {
          if (res === true) {
            this.$router.push({name: 'childrenMessage', params: {state: 'hasnot'}})
          }
        })
      },
      createTopic() {
        this._checkLogin().then((res) => {
          if (res === true) {
            this.$router.push('/create-topic')
          }
        })
      },
      checkSlider() {
        this.$emit('slider', true)
      },
      _getMsgCount() {
        if (this.isLogin) {
          getMsgCount(this.userInfo.user_token).then((res) => {
            if (res.success === true) {
              this.msgCount = res.data
            } else {
              this.msgCount = 0
            }
          })
        }
      }
    }
  }
</script>

<style rel="stylesheet/scss" lang="scss">
  @import "~common/scss/const";

  #header {
    width: 100%;
    height: 60px;
    background-color: $color-background-ll;
    color: $color-text-w;
    box-sizing: border-box;
    display: flex;
    padding: 10px;
    align-items: center;
    .slider-bar-button {
      flex: 0 0 40px;
      width: 40px;
      line-height: 40px;
      cursor: pointer;
      text-align: center;
      i {
        font-size: $font-size-large-x;
      }
    }
    .name {
      flex: 1;
      color: $color-text-w;
      line-height: 40px;
      height: 40px;
      display: inline-block;
      overflow: hidden;
      text-overflow: ellipsis;
      font-size: $font-size-large;
      box-sizing: border-box;
      padding: 0 10px;
      white-space: nowrap;
    }
    .msg-post {
      flex: 0 0 20px;
      position: relative;
      text-align: center;
      padding: 0 10px;
      cursor: pointer;
      i {
        font-size: $font-size-large-x;
      }
      em {
        text-align: center;
        display: inline-block;
        position: absolute;
        top: -5px;
        left: 20px;
        font-size: $font-size-small-s;
        background-color: #ff3333;
        font-style: normal;
        color: $color-text-w;
        padding: 2px 3px;
        border-radius: 10px;
        min-width: 10px;
      }
    }
    .create-topic {
      flex: 0 0 20px;
      text-align: center;
      padding: 0 10px;
      cursor: pointer;
      i {
        font-size: $font-size-large-x;
      }
    }
  }
</style>
